import React, { useState, useEffect } from 'react';
import { Card, Descriptions, Button, Space, Tag, message, Spin } from 'antd';
import { ArrowLeftOutlined, EditOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { history, useParams } from '@umijs/max';

import { apiClients } from '@/services/apiClient';
import { autoLoginInDev } from '@/utils/autoLogin';
import type { User } from '@/services/generated';

const UserDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [loading, setLoading] = useState(false);
  const [userInfo, setUserInfo] = useState<User | null>(null);

  // 获取用户详情
  const fetchUserDetail = async () => {
    if (!id) return;
    
    try {
      setLoading(true);
      await autoLoginInDev();
      const response = await apiClients.users.usersRetrieve({ id: parseInt(id!) });
      setUserInfo(response.data);
    } catch (error: any) {
      console.error('获取用户详情失败:', error);
      message.error('获取用户详情失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUserDetail();
  }, [id]);

  const getStatusTag = (status: string) => {
    const statusMap = {
      active: <Tag color="green">激活</Tag>,
      inactive: <Tag color="default">未激活</Tag>,
      suspended: <Tag color="red">暂停</Tag>,
    };
    return statusMap[status as keyof typeof statusMap] || <Tag>{status}</Tag>;
  };

  return (
    <PageContainer
      title="用户详情"
      extra={
        <Space>
          <Button 
            icon={<ArrowLeftOutlined />} 
            onClick={() => history.back()}
          >
            返回
          </Button>
          <Button 
            type="primary" 
            icon={<EditOutlined />}
            onClick={() => history.push(`/user/edit/${id}`)}
          >
            编辑用户
          </Button>
        </Space>
      }
    >
      <Spin spinning={loading}>
        <Card>
          <Descriptions
            title="基本信息"
            column={2}
            bordered
          >
            <Descriptions.Item label="用户ID">{userInfo?.id}</Descriptions.Item>
            <Descriptions.Item label="用户名">{userInfo?.username}</Descriptions.Item>
            <Descriptions.Item label="邮箱">{userInfo?.email}</Descriptions.Item>
            <Descriptions.Item label="真实姓名">
              {userInfo?.real_name || '未设置'}
            </Descriptions.Item>
            <Descriptions.Item label="手机号">
              {userInfo?.phone || '未设置'}
            </Descriptions.Item>
            <Descriptions.Item label="用户状态">
              {userInfo?.status && getStatusTag(userInfo.status)}
            </Descriptions.Item>
            <Descriptions.Item label="账户激活">
              <Tag color={userInfo?.is_active ? 'green' : 'red'}>
                {userInfo?.is_active ? '已激活' : '未激活'}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="管理员权限">
              <Tag color={userInfo?.is_staff ? 'blue' : 'default'}>
                {userInfo?.is_staff ? '是' : '否'}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="超级管理员">
              <Tag color={userInfo?.is_superuser ? 'red' : 'default'}>
                {userInfo?.is_superuser ? '是' : '否'}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="部门ID">
              {userInfo?.department_id || '未设置'}
            </Descriptions.Item>
            <Descriptions.Item label="注册时间">
              {userInfo?.date_joined ? new Date(userInfo.date_joined).toLocaleString() : '-'}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {userInfo?.created_at ? new Date(userInfo.created_at).toLocaleString() : '-'}
            </Descriptions.Item>
            <Descriptions.Item label="更新时间">
              {userInfo?.updated_at ? new Date(userInfo.updated_at).toLocaleString() : '-'}
            </Descriptions.Item>
            <Descriptions.Item label="最后登录时间">
              {userInfo?.last_login_at ? new Date(userInfo.last_login_at).toLocaleString() : '从未登录'}
            </Descriptions.Item>
          </Descriptions>
        </Card>
      </Spin>
    </PageContainer>
  );
};

export default UserDetail;
